<template>
    <div>
         <!-- 右侧更多功能 -->
         <div class="flex boxShadow moreBox" id="moreBox">
             <div class="moreItem" @click="clickIcon('map')">
                 <div class="boxShadow" :class="mapBtn?'mapBtnSel' : 'mapBtnNor'"></div>
                 地图
             </div>
             <div class="moreItem" @click="clickIcon('locationEstimate')">
                 <div class="boxShadow" :class="this.$store.state.locationEstimate?'locationEstimateSel' : 'locationEstimateNor'"></div>
                 位置估计
             </div>
             <div class="moreItem" @click="clickIcon('footprint')">
                 <div class="boxShadow" :class="outline?'outlineSel' : 'outlineNor'"></div>
                 机器轮廓
             </div>
             <div class="moreItem"  @click="clickIcon('laserScan')">
                 <div class="boxShadow" :class="laser?'laserSel' : 'laserNor'"></div>
                 激光
             </div>
             <div class="moreItem" @click="clickIcon('globalPlan')">
                 <div class="boxShadow" :class="global?'globalSel' : 'globalNor'"></div>
                 全局路径
             </div>
             <div class="moreItem" @click="clickIcon('localPlan')">
                 <div class="boxShadow" :class="part?'partSel' : 'partNor'"></div>
                 局部路径
             </div>
             <div class="moreItem" @click="clickIcon('voice')">
                 <div class="boxShadow voiceNor"></div>
                 声音
             </div>
             <div class="moreItem" @click="clickIcon('update')">
                 <div class="boxShadow updateNor"></div>
                 更新
             </div>
             <div class="moreItem" @click="clickIcon('help')">
                 <div class="boxShadow" :class="help?'helpSel' : 'helpNor'"></div>
                 帮助
             </div>
         </div>
    </div>    
</template>

<script>
import { showMapFunction, locationEstimate, hideOtherModule } from '../js/methods'
export default {
    name: 'moreBtns',
    components:{

    },
    data(){
        return{
            mapBtn: true,
            outline: false,
            laser: false,
            global: false,
            part: false,
            update: false,
            help: false
        }
    },
    methods:{
        // 选择更多弹框中的按钮
        clickIcon:function(type){
            const that = this;
            switch (type){
                case 'map':
                that.mapBtn = !that.mapBtn;
                showMapFunction(type, that.mapBtn);
                break;

                case 'locationEstimate':
                that.$store.commit('switchLocationEstimate', !that.$store.state.locationEstimate);
                locationEstimate(that.$store.state.locationEstimate);
                break;

                case 'laserScan':
                that.laser = !that.laser;
                showMapFunction(type, that.laser);
                break;

                case 'footprint':
                that.outline = !that.outline;
                showMapFunction(type, that.outline);
                break;
                case 'globalPlan':
                that.global = !that.global;
                showMapFunction(type, that.global);
                break;
                case 'localPlan':
                that.part = !that.part;
                showMapFunction(type, that.part);
                break;

                case 'voice':
                hideOtherModule();
                that.$store.commit('switchShowMask',true);
                that.$store.commit('switchVoice',true);
                break;

                case 'update':
                that.$store.commit('switchMoreBtns',false);
                that.$store.commit('switchShowMask',true);
                that.$store.commit('switchUpdate',true);
                break;

                case 'help':
                window.location.href = 'http://hitrobotgroup.github.io/'
                break;
                
                default:
                break;
            }
        }
    },

    watch:{

    }

}
</script>

<style scoped lang="less">
    .moreBox{
        background-color: #ffffff;
        position: fixed;
        // bottom: 220px;
        top: 100px;
        right: 8px;
        z-index: 999;
        border-radius: 4px;
        background-color: #ffffff;
        width: 214px;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 8px;
        .moreItem{
            font-size: 12px;
            margin: 5px 8px;
            div{
                width: 50px;
                height: 50px;
                border-radius: 4px;
                background-position: center;
                background-repeat: no-repeat;
                background-size: 40%;
                margin-bottom: 5px;
            }
            .mapBtnSel{
                background-image: url("../../src/assets/icon-map-sel.png");
            }
            .mapBtnNor{
                background-image: url("../../src/assets/icon-map-nor.png");
            }
            .locationEstimateSel{
                background-image: url("../../src/assets/icon-locationEstimate-sel.png");
            }
            .locationEstimateNor{
                background-image: url("../../src/assets/icon-locationEstimate-nor.png");
            }
            .outlineSel{
                background-image: url("../../src/assets/icon-outline-sel.png");
            }
            .outlineNor{
                background-image: url("../../src/assets/icon-outline-nor.png");
            }
            .laserSel{
                background-image: url("../../src/assets/icon-laser-sel.png");
            }
            .laserNor{
                background-image: url("../../src/assets/icon-laser-nor.png");
            }
            .globalSel{
                background-image: url("../../src/assets/icon-global-sel.png");
            }
            .globalNor{
                background-image: url("../../src/assets/icon-global-nor.png");
            }
            .partSel{
                background-image: url("../../src/assets/icon-part-sel.png");
            }
            .partNor{
                background-image: url("../../src/assets/icon-part-nor.png");
            }
           
            .voiceNor{
                background-image: url("../../src/assets/icon-voice-nor.png");
            }
            .updateSel{
                background-image: url("../../src/assets/icon-update-sel.png");
            }
            .updateNor{
                background-image: url("../../src/assets/icon-update-nor.png");
            }
            .helpSel{
                background-image: url("../../src/assets/icon-help-sel.png");
            }
            .helpNor{
                background-image: url("../../src/assets/icon-help-nor.png");
            }
        }
    }
</style>